<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-06-01 09:27:30
 * @LastEditTime : 2023-12-21 11:16:45
-->
<script lang="ts" setup name="IkPanel">
const props = defineProps({
  // 显示头部
  head: {
    type: Boolean,
    default: true
  },
  // 显示右侧操作
  right: {
    type: Boolean,
    default: true
  },
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 新增按钮权限code
  role: {
    type: String,
    default: ''
  },
  addBtn: {
    type: Boolean,
    default: true
  },
  refreshBtn: {
    type: Boolean,
    default: true
  }
})
defineEmits(['hand-add', 'hand-refresh'])

const { t } = useConfig()
</script>

<template>
  <el-card
    class="ik-panel-card"
    shadow="never"
    v-bind="{ ...$attrs, ...props }"
    title=""
  >
    <template v-if="head" #header>
      <div class="left">
        <p v-if="$slots.headerLeft" class="title">
          <slot name="headerLeft"></slot>
        </p>
        <p v-else class="title">{{ title }}</p>
      </div>
      <div v-if="right" class="right">
        <slot v-if="$slots.headerRight" name="headerRight"></slot>
        <div v-else class="btn">
          <IkSvgIcon
            v-if="refreshBtn"
            name="icon-shuaxin"
            show-bg
            pop
            size="big"
            :start-margin="false"
            :title="t('action.refresh')"
            @click="$emit('hand-refresh')"
          />
          <IkSvgIcon
            v-if="addBtn"
            v-role="role"
            name="icon-xinzeng"
            show-bg
            pop
            size="big"
            :title="t('action.add')"
            @click="$emit('hand-add')"
          />
        </div>
      </div>
    </template>
    <slot></slot>
  </el-card>
</template>

<style lang="scss" scoped>
.ik-panel-card {
  height: 100%;
  border: none;

  :deep(.el-card__header){
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--ik-card-header-height);
    position: relative;
  }

  :deep(.el-card__body){
    height: calc(100% - var(--ik-card-header-height, 72px));
    // display: flex;
    // flex-direction: column;
    overflow-y: auto;
  }

  .title{
    font-weight: 700;
    font-size: 20px;
    color: var(--ik-page-title-color);
  }
}
</style>
